<template>
	<view class="kefu-container">
		<!-- 消息区域 -->
		<view class="message-area">
			<view class="empty-state">
				<text class="empty-text">暂无消息</text>
			</view>
		</view>
		
		<!-- 输入区域 -->
		<view class="input-area">
			<input 
				class="message-input" 
				placeholder="用一句话简短的描述您的问题" 
				v-model="messageText"
				@confirm="sendMessage"
			/>
			<button class="send-btn" @click="sendMessage">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageText: ''
			}
		},
		methods: {
			// goBack() {
			// 	uni.navigateBack()
			// },
			sendMessage() {
				if (!this.messageText.trim()) {
					uni.showToast({
						title: '请输入消息内容',
						icon: 'none'
					})
					return
				}
				
				// 这里可以添加发送消息的逻辑
				// console.log('发送消息:', this.messageText)
				
				// 清空输入框
				this.messageText = ''
				
				uni.showToast({
					title: '消息已发送',
					icon: 'success'
				})
			}
		}
	}
</script>

<style scoped>
.kefu-container {
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}

.message-area {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.empty-state {
	text-align: center;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}

.input-area {
	padding: 30rpx;
	background-color: #ffffff;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.message-input {
	flex: 1;
	height: 80rpx;
	background-color: #f8f8f8;
	border-radius: 40rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #333333;
}

.message-input::placeholder {
	color: #999999;
}

.send-btn {
	width: 120rpx;
	height: 80rpx;
	background-color: #ff4444;
	color: #ffffff;
	border: none;
	border-radius: 40rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* .send-btn:active {
	background-color: #e63939;
} */
</style>
